<div class="devui-image-preview-wrapper">
  <button class="devui-image-preview-close-btn" (click)="onClose()">
    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon
          fill="#293040"
          fill-rule="nonzero"
          points="8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"
        ></polygon>
      </g>
    </svg>
  </button>
  <img class="devui-image-preview-main-image" [class.devui-optimal-proportion]="isOptimal" [attr.src]="targetImageSrc | safe : 'url'" />

  <!-- TODO: button参数化重构 -->
  <button class="devui-fixed-arrow-left" (click)="pre()" dTooltip [position]="'right'" [content]="i18nText.pre">
    <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon
          fill="#293040"
          fill-rule="nonzero"
          points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
        ></polygon>
      </g>
    </svg>
  </button>
  <button class="devui-fixed-arrow-right" (click)="next()" dTooltip [position]="'left'" [content]="i18nText.next">
    <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon
          fill="#293040"
          fill-rule="nonzero"
          transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
          points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
        ></polygon>
      </g>
    </svg>
  </button>

  <div class="devui-image-preview-toolbar">
    <button
      *ngIf="toolbar.zoomIn"
      [class.disabled]="disabledZoomIn"
      (click)="zoomIn()"
      dTooltip
      [position]="'top'"
      [content]="i18nText?.zoomIn"
    >
      <svg width="18px" height="18px" viewBox="0 0 16 16">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g fill="#293040" fill-rule="nonzero">
            <path
              d="M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"
            ></path>
          </g>
        </g>
      </svg>
    </button>
    <button
      *ngIf="toolbar.zoomOut"
      [class.disabled]="disabledZoomOut"
      (click)="zoomOut()"
      dTooltip
      [position]="'top'"
      [content]="i18nText.zoomOut"
    >
      <svg width="18px" height="18px" viewBox="0 0 16 16">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g fill="#293040" fill-rule="nonzero">
            <path
              d="M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"
            ></path>
          </g>
        </g>
      </svg>
    </button>
    <button *ngIf="toolbar.rotate" (click)="rotate()" dTooltip [position]="'top'" [content]="i18nText.rotate">
      <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z"
            fill="#293040"
          ></path>
        </g>
      </svg>
    </button>
    <button *ngIf="toolbar.prev && toolbar.next" (click)="pre()" dTooltip [position]="'top'" [content]="i18nText.pre">
      <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <polygon
            fill="#293040"
            fill-rule="nonzero"
            points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
          ></polygon>
        </g>
      </svg>
    </button>
    <span *ngIf="toolbar.index" (click)="showInput = true" class="devui-image-preview-index">
      <d-input-number
        *ngIf="showInput"
        size="sm"
        [min]="1"
        [max]="totalImageNum"
        [autoFocus]="true"
        [ngModel]="targetImageIndex + 1"
        (keyup.enter)="showInput = false"
        (blur)="showInput = false"
        (whileValueChanging)="inputChange($event)"
        (ngModelChange)="inputChange($event)"
      >
      </d-input-number>
      <span *ngIf="!showInput">{{ targetImageIndex + 1 + ' ' }}</span>
      <span>{{ '/ ' + totalImageNum }}</span>
    </span>
    <button *ngIf="toolbar.prev && toolbar.next" class="devui-next" (click)="next()" dTooltip [position]="'top'" [content]="i18nText.next">
      <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <polygon
            fill="#293040"
            fill-rule="nonzero"
            transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
            points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
          ></polygon>
        </g>
      </svg>
    </button>
    <button *ngIf="toolbar.scaleBest" (click)="setScaleBest()" dTooltip [position]="'top'" [content]="i18nText.bestScale">
      <svg width="18px" height="18px" viewBox="0 0 16 16">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z"
            fill="#293040"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
    </button>
    <button *ngIf="toolbar.scaleOriginal" (click)="setScaleOriginal()" dTooltip [position]="'top'" [content]="i18nText.originScale">
      <span>1:1</span>
    </button>
    <button *ngIf="toolbar.originnalImage" (click)="getOriginalImage()" dTooltip [position]="'top'" [content]="i18nText.origin">
      <svg width="16px" height="16px" viewBox="0 0 16 16">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-1196.000000, -96.000000)" fill="#293040" fill-rule="nonzero">
            <g transform="translate(407.000000, 93.000000)">
              <path
                d="M804,4 L790,4 L790,11.940983 L794.058237,9.91186456 L798.536534,13.3949845 L801.014076,11.908459
                    L804,13.8990748 L804,4 Z M803.72265,14.9160251 L800.985924,13.091541 L798.463466,14.6050155 L793.941763,11.0881354
                    L790.223607,12.9472136 C790.151699,12.9831673 790.07527,13.000168 790,13.0001094 L790,18 L804,18 L804,15.0000529
                    C803.90455,15.0001406 803.80803,14.9729453 803.72265,14.9160251 Z M789,19 L789,3 L805,3 L805,19 L789,19 Z M801,9
                    C800.447715,9 800,8.55228475 800,8 C800,7.44771525 800.447715,7 801,7 C801.552285,7 802,7.44771525 802,8 C802,8.55228475
                    801.552285,9 801,9 Z"
              ></path>
            </g>
          </g>
        </g>
      </svg>
    </button>
    <button *ngIf="toolbar.download" (click)="getOriginalImage(true)" dTooltip [position]="'top'" [content]="i18nText.download">
      <svg width="16px" height="16px" viewBox="0 0 16 16">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g>
            <path
              d="M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z"
            ></path>
          </g>
        </g>
      </svg>
    </button>
  </div>
</div>
